<html>
  <head>
    <script>
	
      function timeStr() {
		time = new Date();
	
		dateStr = "<td class=\"time\">"+time.getHours()+":"
		if (time.getMinutes() < 10)
			dateStr = dateStr+"0";
		
		dateStr = dateStr+time.getMinutes()+":";
		
		if (time.getSeconds() < 10)
			dateStr = dateStr+"0";
			
		dateStr = dateStr+time.getSeconds()+"</td>";
		
		return dateStr;
	  }
	
	  function appendMessage(user,message,mode,color) {
		if (mode == 'highlighted_message') {
			html = "<tr><td class=\"user\" style=\"background-color:rgba("+color+",0.3);\"><b>"+user+":</b></td><td class=\"message_high\">"+message+"</td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		}
		else if (mode == 'self_message') {
			html = "<tr><td class=\"user_self\"><b>"+user+":</b></td><td class=\"message_self\">"+message+"</td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		}
		else if (mode == 'action_message') {
			html = "<tr><td class=\"user_action\" colspan=\"2\" style=\"background-color:rgb("+color+",0.3)\">"+user+" "+message+"</td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		}
		else if (mode == 'self_action_message') {
			html = "<tr><td class=\"my_action\" colspan=\"2\">"+user+" "+message+"</td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		}
		else {
			html = "<tr><td class=\"user\" style=\"background-color:rgba("+color+",0.3);\"><b>"+user+":</b></td><td class=\"message\">"+message+"</td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		}
		
		appendHTML(html);
	  }
	  
	  function appendLeave(user, channel) {
	    html = "<tr><td class=\"action\" colspan=\"2\"><b>"+user+" hat "+channel+" verlassen.</b></td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		
		appendHTML(html);
	  }
	  
	   function appendQuit(user, message) {
	    html = "<tr><td class=\"action\" colspan=\"2\"><b>"+user+" hat die Verbindung getrennt ("+message+").</b></td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		
		appendHTML(html);
	  }
	  
	  function appendJoin(user, channel) {
		html = "<tr><td class=\"action\" colspan=\"2\"><b>"+user+" hat "+channel+" betreten.</b></td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		
		appendHTML(html);
	  }
	  
	  function appendRemoveMode(user, mode, user2) {
		html = "<tr><td class=\"action\" colspan=\"2\"><b>"+user+" entfernt "+mode+"-Status bei "+user2+".</b></td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		
		appendHTML(html);
	  }
	  
	  function appendGiveMode(user, mode, user2) {
		html = "<tr><td class=\"action\" colspan=\"2\"><b>"+user+" gibt "+mode+"-Status an "+user2+".</b></td>"+timeStr()+"</tr><tr height=\"4px\"></tr>";
		
		appendHTML(html);
	  }
	  
	  function appendHTML(html) {
		messages = document.getElementById("messages");
		range = document.createRange();
		range.selectNode(messages);
		documentFragment = range.createContextualFragment(html);
		messages.appendChild(documentFragment);
		document.body.scrollTop = document.body.offsetHeight;
		return "ok";
	  }
	</script>
	<style type="text/css">	
				
		#messages {
			font-family:'Lucida Grande';
			font-size:75%;
		}
		
		.user {
			-webkit-border-top-left-radius:5px;
			-webkit-border-bottom-left-radius:5px;
			vertical-align:text-top;
			padding-top:2px;
			padding-bottom:2px;
			padding-left:8px;
			padding-right:2px;
		}
		
		.message {
			-webkit-border-top-right-radius:5px;
			-webkit-border-bottom-right-radius:5px;
			background-color:rgb(235,235,235);
			padding:2px;
			width: 100%;
			word-wrap: break-word;
			overflow: hidden;
		}
		
		.message_high {
			-webkit-border-top-right-radius:5px;
			-webkit-border-bottom-right-radius:5px;
			background-color:rgba(255,0,0,0.6);
			padding:2px;
			width: 100%;
			word-wrap: break-word;
			overflow: hidden;
		}
		
		.user_self {
			-webkit-border-top-left-radius:5px;
			-webkit-border-bottom-left-radius:5px;
			vertical-align:text-top;
			background-color:rgb(200,255,200);
			padding-top:2px;
			padding-bottom:2px;
			padding-left:8px;
			padding-right:2px;
		}
		
		.message_self {
			-webkit-border-top-right-radius:5px;
			-webkit-border-bottom-right-radius:5px;
			background-color:rgb(150,255,150);
			padding:2px;
			width: 100%;
			word-wrap: break-all;
			overflow: hidden;
		}
		
		.time {
			padding: 2px;
			color: gray;
			vertical-align:text-top;
			text-align: right;
		}
		
		.action {
			-webkit-border-radius: 5px;
			background-color:rgb(247,247,247);
			text-align:center;
			width: 100%;
		}
		
		.user_action {
			-webkit-border-radius: 5px;
			width: 100%;
			padding-left:8px;
			font-style: italic;
			overflow: hidden;
		}
		
		.my_action {
			-webkit-border-radius: 5px;
			background-color: rgb(200, 255, 200);
			width: 100%;
			padding-left:8px;
			font-style: italic;
			overflow: hidden;
		}
		
		*{ word-wrap:break-word; }
	</style>
  </head>
  <body>
    <table id="messages" width="100%" cellspacing="0">
	<!-- Insert Place Holder -->
	</table>
  </body>
</html>